Build Services page: hero, linked decisions, and service clusters (LS-1598) - #51
Merged
Merged
Conversation
brandonmarshal
added
area:theme
brandonmarshal
added a commit
that referenced
this pull request
Sep 10, 2026
Context - Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
brandonmarshal
added this pull request to stack #52
September 10, 2026 05:51
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved moderate findings remain around asset loading, missing service links, and ineffective hover/focus states.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Builds the Services page with a hero, lifecycle decision links, and five service-cluster cards.
Changes:
- Adds 14 service links and six lifecycle phases.
- Adds clustered service cards with shared styling.
- Adds interaction styles, compiled assets, registration, and documentation.
File summaries
| File | Summary |
|---|---|
styles/sections/cards/card-cluster.json |
Adds the cluster card style. Nit (2 votes): avoid exposing a one-off global style or provide another reusable consumer. |
src/scss/structural/services-service-clusters.scss |
Adds cluster tag interactions. Moderate (3 votes): inline colors override hover/focus tint declarations. |
src/scss/structural/services-linked-decisions.scss |
Adds lifecycle pill interactions. Moderate (3 votes): inline border color prevents the hover/focus tint from applying. |
src/scss/structural/services-hero.scss |
Adds hero pill interaction styles. |
patterns/sections/services-service-clusters.php |
Adds five cluster cards. Moderate (3 votes): four services are missing from cluster metadata. Moderate (2 votes): shared icon-well styles load only after render. |
patterns/sections/services-linked-decisions.php |
Adds the six-step lifecycle process row. |
patterns/hero/services-hero.php |
Adds the Services hero and 14 service links. |
package.json |
Adds Sass build entries. |
inc/animations.php |
Registers and detects Services bundles. Moderate (3 votes): add head-time Services-page conditions for these bundles and their shared dependency. |
functions.php |
Registers editor styles. |
CHANGELOG.md |
Documents the Services page changes. |
assets/css/services-service-clusters.css |
Provides compiled cluster styles. |
assets/css/services-linked-decisions.css |
Provides compiled lifecycle styles. |
assets/css/services-hero.css |
Provides compiled hero styles. |
Review details
Files not reviewed (3)
- assets/css/services-hero.css: Generated file
- assets/css/services-linked-decisions.css: Generated file
- assets/css/services-service-clusters.css: Generated file
- Files reviewed: 11/14 changed files
- Comments generated: 6
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
8 tasks
brandonmarshal
commented
Sep 10, 2026
brandonmarshal
added a commit
that referenced
this pull request
Sep 11, 2026
Context - Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
brandonmarshal
force-pushed
the
feature/ls-1598-build-services-page
branch
from
September 11, 2026 12:29
93e9795 to
601f310
Compare
Hero - Add patterns/hero/services-hero.php: breadcrumb, eyebrow, heading, description, and primary/secondary CTAs - Add wrapped row of all 14 service tags, colour-coded by lifecycle Phase (Discover/Create/Build/Launch/Grow/Evolve) to match the mega menu convention, each linking to its real /services/ page - Add decorative "Services / Lifecycle" preview card reusing the existing is-style-glass-card shell Tokens & assets - No new colour tokens, font sizes, or global styles required — reuses existing semantic tokens and presets throughout - Source fresh Phosphor "regular" icons, embedded as real SVG markup Validation - php -l, patterns:escape, security:scan, and phpcs --standard=WordPress all pass clean on the new pattern
Layout fix - Fix breadcrumb-to-badge gap reading too tight by bumping the eyebrow badge's top margin from spacing|20 to spacing|30 Service pill styling - Switch pill label text to neutral text.default, keep icons phase-coloured for lifecycle-phase association - Add a subtle phase-tinted background and phase-tinted border to each pill (colour-mix over existing phase tokens) - Increase pill padding for a larger, more substantial pill - Add hover/focus-within state: stronger background/border tint, translateY(-1px), subtle shadow - Add a :focus-visible outline ring for keyboard accessibility New structural stylesheet - Add src/scss/structural/services-hero.scss for the pill interactive states (no block-supports equivalent exists for hover/focus-visible), wired into build scripts and the bundle-detection/enqueue system the same way as other hero bundles (inc/animations.php, functions.php editor styles) Context - Rest-state pill colours are set inline per instance (each pill mixes its own phase token); hover/focus overrides need !important to beat that inline specificity, documented in the stylesheet
…598) - Add patterns/sections/services-linked-decisions.php: six-step process pill row (Discover/Create/Build/Launch/Grow/Evolve) matching the site's lifecycle-phase colours, linking to new /services/ phase pages - Neutral pills with phase-only badge, hover/focus-within states, :focus-visible outline - Fix whole-pill click target on both hero and Section 1 pills — only the text was clickable before; anchor now stays position:static so its ::before overlay sizes against the full pill, not just the text - Add src/scss/structural/services-linked-decisions.scss for the states/pseudo-elements JSON can't express, wired into build/enqueue - Correct services-hero.scss's CSS-limitation comments to AGENTS.md's exact format
- Add patterns/sections/services-service-clusters.php: "Five ways the work groups together" — 5 cluster cards in an asymmetric 3+2 layout, each with an icon well, index number, description, and a footer row of clickable tag links to the existing individual service pages - Add styles/sections/cards/card-cluster.json: new shared card shell (no existing one fit — background and single-link behaviour differ from Card - Category) - Add src/scss/structural/services-service-clusters.scss for the tag hover states, wired into build/enqueue like the other sections Fixes - Equal card height via dimensions.minHeight:100%, footer tags pinned to the bottom via margin-top:auto - Fix a real bug: second card row's blockGap was nested outside spacing instead of inside it, silently using WordPress's default gap instead of matching row 1 - Distinguish the section's background from Section 1's using the existing surface.card token (matches homepage-what-we-build's established alternating-section convention)
Context - Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
Bug fix - services-service-clusters.php: fix both card rows' blockGap only setting its horizontal component, which fell back to WordPress's default vertical gap once columns stack on mobile/tablet - services-linked-decisions.scss: add !important to the pill's hover border-color so it actually overrides the inline rest-state color - services-service-clusters.scss: add !important to the cluster tag's hover background/border-color, same cause as above - inc/animations.php: add a Services-page condition to the shared icon-well bundle so it loads in <head> instead of only being caught by the render_block/footer fallback
brandonmarshal
force-pushed
the
feature/ls-1598-build-services-page
branch
from
September 14, 2026 08:17
601f310 to
60a693b
Compare
brandonmarshal
added a commit
that referenced
this pull request
Sep 16, 2026
Context - Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
…ild-services-page
Contributor
|
Warning Review limit reachedNext included review available in 46 minutes. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (14)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Builds the Services page in three patterns: the hero, a six-step "linked decisions" process row, and a service-clusters section grouping all 14 services into 5 thematic cards. No new colour tokens, font sizes, or global styles were needed — everything reuses existing semantic tokens, presets, and card shells.
Hero (
patterns/hero/services-hero.php)/services/pageis-style-glass-cardshell:focus-visiblering) added viasrc/scss/structural/services-hero.scss, since block-supports has no equivalent for hover/focus-visiblespacing|20tospacing|30)Linked decisions (
patterns/sections/services-linked-decisions.php)/services/phase pages:focus-visibleoutlineposition:staticso its::beforeoverlay sizes against the full pill, not just the textsrc/scss/structural/services-linked-decisions.scssfor the states/pseudo-elements JSON can't expressService clusters (
patterns/sections/services-service-clusters.php)styles/sections/cards/card-cluster.json— no existing shell fit, since background and single-link behaviour differ from Card - Categorydimensions.minHeight:100%, footer tags pinned to the bottom viamargin-top:autoblockGapwas nested outsidespacinginstead of inside it, silently falling back to WordPress's default gap instead of matching row 1surface.cardtoken, matchinghomepage-what-we-build's established alternating-section conventionsrc/scss/structural/services-service-clusters.scssfor the tag hover statesTest plan
php -lon all touched PHP files — passesnpm run schema:validate— all JSON files, including the newcard-cluster.json, passnpm run patterns:escape— the only warnings are in the two new files' pre-existing icon-echo lines, each alreadyphpcs:ignore-annotated with justification (static, developer-authored SVG, not user input)npm run security:scan— passes clean on every file this branch touchessasscompiles all three new stylesheets cleanTracked under LS-1598.